<template>
  <div class="box-container">
    <vgl-renderer scene="mainScene" camera="mainCamera" class="main-renderer"
      :alpha="false"
      :vantialias="true"
    >
      <vgl-mesh-standard-material name="material1"></vgl-mesh-standard-material>
      <vgl-box-geometry name="box"></vgl-box-geometry>
      <vgl-scene name="mainScene">
        <vgl-mesh geometry="box" material="material1"></vgl-mesh>
        <vgl-directional-light position="1 2 3"></vgl-directional-light>
      </vgl-scene>
      <vgl-perspective-camera orbit-position="3 1 0.5" name="mainCamera"></vgl-perspective-camera>
    </vgl-renderer>
  </div>
</template>

<script>
export default {
  name: "box",

  data () {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>

.main-renderer{
  width: 500px;
  height: 500px;
}
</style>